<template>
  <div class="count-down-container">
    <!-- <span class="img-wrap">
      <img :src="totalPic.loudou" alt>
    </span> -->
    <span class="time-reduce">倒计时 {{ countTime }}s</span>
    <div class="count-down">
      <img :src="totalPic.jindutiao" alt>
      <span ref="lineLength" :style="{width: width}" class="line-length"></span>
    </div>
  </div>
</template>

<script>
import { filterPic } from "../apis/utils.js";
import { setTimeout } from "timers";
export default {
  data() {
    return {
      totalPic: {},
    };
  },
  props: {
    countTime: {
      type: String,
      default: "6.00"
    },
    width: String
  },

  created() {
    const imgUrl = {
      loudou: "loudou.png",
      jindutiao: "jindutiao.png"
    };
    this.totalPic = filterPic(imgUrl);

    console.log(this.width)
  },

  mounted() {
    // this.width = parseInt(this.$refs.lineLength.style.width);
    // this.countDown();
    // console.log(width - width / 6 + "%");
  },

  methods: {
    // countDown() {
    //   let width = parseInt(this.$refs.lineLength.style.width);
    //   this.$refs.lineLength.style.width = width - this.width / 60 + "%";
    //   if (this.$refs.lineLength.style.width <= "0.5%") {
    //     return;
    //   }
    //   setTimeout(() => {
    //     this.countDown();
    //   }, 100);
    // }
  }
};
</script>
<style lang="less" scoped>
img {
  vertical-align: baseline;
}
.count-down-container {
  color: #fff;
  font-size: 0.22rem;
  // .img-wrap {
  //   display: inline-block;
  //   width: 0.22rem;
  //   height: 0.34rem;
  // }
  .time-reduce {
    display: inline-block;
    font-size: .30rem;
    margin-bottom: .05rem;
  }

  .count-down {
    position: relative;
    width: 1.66rem;
    height: 0.22rem;
    vertical-align: top;
    .line-length {
      box-sizing: border-box;
      position: absolute;
      top: 0.06rem;
      left: 0.07rem;
      display: inline-block;
      height: 50%;
      border-radius: 0.1rem;
      background: #fddb44;
      // animation:mymove 6s infinite;
    }
  }
}
// @keyframes mymove {
//   0% {
//     width: 90%;
//   }
//   100% {
//     width: 0%;
//   }
// }
</style>


